<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        计算属性

            1. 写在哪里，computed 选项中
            2. vue有个建议，不要将复杂的逻辑写到模板中（html）
            3. 技术属性中使用到的数据，可以理解为是这个计算属性的依赖数据
        
        计算属性的特点：
            1. 当依赖发生变化的时候，计算属性的函数会重新执行。效果是页面自动更新
     -->

    <div id="app">
        <h4>{{ msg }}</h4>
        <h4>反转 msg {{ msg.split('').reverse().join('') }}</h4>

        <h4>水果列表</h4>
        <ul>
            <li v-for="item in list" :key="item.id">{{ item.name }}</li>
        </ul>

        <h4>isLike为true 的水果列表</h4>
        <ul>
            <li v-for="item in list.filter(item => item.isLike)" :key="item.id">{{ item.name }}</li>
        </ul>

        <h4>isLike为true 的水果列表的id</h4>
        <!-- 
            [
                { id: 1, name: 'Apple', isLike: true },
                { id: 2, name: 'Banana', isLike: false },
            ]

            [
                1, 2
            ]
         -->
        <ul>
            <li v-for="item in list.filter(item => item.isLike).map(item => item.id)" :key="item">{{ item }}</li>
        </ul>

        <hr>
        <h4>反转 msg - computed</h4>
        <input type="text" v-model="msg">
        <p>{{ reverseMsg }}</p>

        <hr>
        <h4>isLike为true 的水果列表 - computed</h4>
        <ul>
            <li v-for="item in isLikeLists" :key="item.id">{{ item.name }}</li>
        </ul>

        <hr>
        <h4>isLike为true 的水果列表的id</h4>
        <ul>
            <li v-for="item in isLikeListIds" :key="item">{{ item }}</li>
        </ul>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: 'hello',
                list: [
                    { id: 1, name: 'Apple', isLike: true },
                    { id: 2, name: 'Banana', isLike: false },
                    { id: 3, name: 'Orange', isLike: true }
                ]
            },
            computed: {
                // key: value
                //  key 就是定义的计算属性的名字，可以想 data 中定义的数据一样拿到 模板（html）中去使用，也可以在 实例对象上点出来
                //  value 是一个函数。
                //          1. 必须要有返回值，返回值的内容，就是这个计算属性的值
                // reverseMsg: function() {
                //     return this.msg.split('').reverse().join('')
                // },
                reverseMsg() {
                    console.log('reverseMsg 函数')
                    // 找依赖 - this.msg
                    return this.msg.split('').reverse().join('')
                },

                isLikeLists() {
                    console.log('isLikeLists 函数')
                    return this.list.filter(item => item.isLike)
                },
                
                isLikeListIds() {
                    return this.list.filter(item => item.isLike).map(item => item.id)
                }
            },
        })
    </script>
</body>

</html>